<template>
  <div class="app-container">
    <div v-if="user">
      <el-row>
        <el-col :span="24" :xs="24">
          <el-card>
            <el-tabs active-name="account">
              <el-tab-pane label="账号" name="account">
                <account :user="userInfo"/>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Account from './components/Account'

  export default {
    name: 'Profile',
    components: {Account},
    data() {
      return {
        user: {},
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        'userInfo'
      ])
    },
    created() {
      this.getUser()
    },
    methods: {
      getUser() {
        this.user = this.userInfo;
      }
    }
  }
</script>
